<template>
  <div class="content">
    <div class="top_filter">
      <div class="top_filter_col">
        <span class="top_filter_col_tit">所属账户</span>
        <el-select prop="account" v-model="searchFrom.ofAccount " placeholder="请选择">
          <el-option-group v-for="group in accountOptions" :key="group.atype" :label="group.atype" >
            <el-option style="font-size: 14px;" v-for="item in group.options" :key="item.aid" :label="item.aname" :value="item.aid">
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <div class="top_filter_col">
        <div class="block">
          <span class="top_filter_col_tit ">收付日期</span>
          <el-date-picker
            v-model="searchFrom.transactionDate1"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </div>

      <div class="top_filter_col">
        <span class="top_filter_col_tit">类型</span>
        <el-select v-model="searchFrom.dtype" placeholder="请选择">
          <el-option label="不限" value=""></el-option>
          <el-option label="收入" value="收入"></el-option>
          <el-option label="支出" value="支出"></el-option>
        </el-select>
      </div>

      <div class="top_filter_col">
				<span class="top_filter_col_tit">
							<el-button class="el-icon-search" size="small" type="success" @click="searchFun()">搜索</el-button>
				</span>
      </div>

    </div>
    <el-table stripe :data="tableData" border>
      <el-table-column align="center" prop="dtype" label="类型">
        <template slot-scope="scope">
          <span class="btn" style="background: #67C23A;" v-if="scope.row.dtype=='收入'">收入</span>
          <span class="btn" style="background: #409EFF;" v-if="scope.row.dtype=='支出'">支出</span>
          <span class="btn" style="background: #a6b1bb;" v-if="scope.row.dtype=='转移'">转移</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="transactionDate" label="收付日期" sortable width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transactionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="proofDate" label="凭证日期"></el-table-column>
      <el-table-column align="center" prop="outmoney" label="提出金额">
        <template slot-scope="scope">
          {{scope.row.outmoney == 0 ? 0 : +scope.row.outmoney}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="inmoney" label="存入金额"></el-table-column>
      <el-table-column align="center" prop="balance" label="账户余额"></el-table-column>

      <el-table-column align="center" prop="comment" label="附注说明"></el-table-column>
      <el-table-column  align="center" prop="ofReason" label="收支原因">
        <template slot-scope="scope" >
          <div v-for="itme in reason">
            <span v-if="scope.row.ofReason==itme.rid">{{itme.rname}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="对象" align="center" prop="object">
        <template slot-scope="scope" v-for="itme in ObjList">
          <span v-if="scope.row.object==String(itme.objId)">{{itme.objName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签" prop="tag">
        <template slot-scope="scope">
          <span v-for="itme in labelList">
            <span v-for="itme1 in scope.row.tag" v-if="itme1==itme.labelId"><el-tag type="info">{{itme.labelName}}</el-tag> </span>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="附件">
        <template slot-scope="scope">
          <a  target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null"  :href="url+scope.row.attachment">
            <el-button type="primary" size="mini" >查看</el-button>
          </a>
          <a  target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDownload(scope.row)"
            >下载</el-button>
          </a>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_box">
      <pagination
        v-show="total>0"
        :total="total"
        :page-sizes="[7, 14, 28, 56]"
        :page-size="7"
        :page.sync="searchFrom.pageNum"
        :limit.sync="searchFrom.pageSize"
        @pagination="getData"
      />
    </div>

  </div>


</template>

<script>
  import {listCurrency} from '@/api/system/currency';
  import {listAccountDetail,deleteAccountDetail,updateAccountDetail} from '@/api/system/accountDetail';
  import {listAccount,income} from '@/api/system/account'
  import {listBalance,addBalance,updateBalance,getBalance} from '@/api/system/balance';
  import {listReason} from '@/api/system/reason';
  import { getInfo } from "@/api/login";
  import { listObj } from "@/api/system/obj";
  import { listLabel } from "@/api/system/label";
  export default {
    data() {
      return {
        labelList:[],
        ObjList:[],
        url:process.env.VUE_APP_BASE_API,
        currencyList: [], //币种列表
        reasonSrList: [], //原因列表
        reasonZcList: [], //原因列表
        reason: [], //原因列表
        accountList:[],
        dealData: '',
        vouData: '',
        dealOn: 0,
        vouOn: 0,
        tableData: [],
        currentPage: 1,
        pagesize: 10,
        searchFrom: {
          pageNum: 1, // 条数
          pageSize: 7, // 页数
        },
        total:0,
        accountOptions:[],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      this.getData()
    },
    methods:{
      getData() {
        let that = this
        this.accountOptions = [{
          atype: '现金',
          options: []
        }, {
          atype: '银行卡',
          options: []
        }, {
          atype: '信用卡',
          options: []
        }]
        getInfo().then(data=>{
          let account={};
          account.ofCompany=data.tuser.ofCompany;
          account.stop = 0;
          account.atype = "现金";
          listAccount(account).then(date => {
            this.accountOptions[0].options = date.rows;
          })
          account.atype = "银行存款";
          listAccount(account).then(date => {
            this.accountOptions[1].options = date.rows;
          })
          account.atype = "信用卡";
          listAccount(account).then(date => {
            this.accountOptions[2].options = date.rows;
          })
          listAccount({ofCompany:data.tuser.ofCompany}).then(date => {
            this.accountList = date.rows;
          })

          listCurrency().then(date => {
            this.currencyList = date.rows;
          })
          listReason({parent: "-1", rtype: "收入"}).then(date => {
            this.reasonSrList = date.rows;
          })
          listReason({parent: "-1", rtype: "支出"}).then(date => {
            this.reasonZcList = date.rows;
          })
          listReason().then(date => {
            this.reason = date.rows;
          })

          let obj={};
          obj.objCompany=data.tuser.ofCompany;
          listObj(obj).then(date=>{
            this.ObjList=date.rows;
          })
          let label={};
          label.labelCompany=data.tuser.ofCompany;
          listLabel(label).then(date=>{
            this.labelList=date.rows;
          })

          this.searchFrom.deleted = 0;
          this.searchFrom.ofCompany=data.tuser.ofCompany;
          listAccountDetail(this.searchFrom).then(res => {
            if (res.code == 200) {
              that.tableData = res.rows
              that.total = res.total
            }
          })
        })
      },
      add() {
        let that = this
        this.$service.account.add(this.addFrom).then(res => {
          if (res.state == 1) {
            that.getData()
          }
          that.ShowDlogForm = false
        })
      },
      stop(scope, row) {
        console.log(scope, row);
        let that = this
        this.$service.account.stop(row.aid).then(res => {
          if (res.state == 1) {
            that.getData()
          }
          that.ShowDlogForm = false
        })
      },
      showEdit(row) {
        this.editData = row
        this.ShowEditForm = true
      },
      edit() {
        let that = this
        this.$service.account.edit(this.editData).then(res => {
          if (res.state == 1) {
            that.getData()
            that.$notify({
              title: '修改成功',
              // message: '修改成功',
              type: 'success'
            });
          }
          that.ShowEditForm = false
        })
      },
      del(id) {
        let that = this
        this.$confirm('确认删除？')
          .then(_ => {
            that.$service.account.del(id).then(res => {
              if (res.state == 1) {
                that.getData()
                that.$notify({
                  title: '删除成功',
                  // message: '修改成功',
                  type: 'success'
                });
              }
            })
            done();
          })
          .catch(_ => {});

      },
      findBalance(aid) {
        let that = this
        that.$service.account.findBalance(aid).then(res => {
          if (res.state == 1) {
            // that.getData()
            that.balanceList=res.data
            this.showBalance=true
          }
        })
      },
      handleSizeChange(){

      },
      handleCurrentChange(){},
      searchFun() {
        this.searchFrom.deleted=0;
        listAccountDetail(this.searchFrom).then(data=>{
          this.tableData=data.rows;
        });
      },
      handleDelete(aid){
        let that = this
        this.$confirm('确认删除？').then(_ => {
          let ad={}
          ad.aid=aid;
          ad.deleted=1;
          updateAccountDetail(ad).then(res => {
            if (res.code == 200) {
              that.getData()
              that.$notify({
                title: '删除成功',
                type: 'success'
              });
            }
          })
          done();
        })
          .catch(_ => {});
      },
      // 文件下载处理
      handleDownload(row) {
        this.download('/common/download/resource?resource=' + encodeURI(row.attachment), {
          ...this.queryParams
        }, row.attachment)
      }
    }
  }
</script>

<style lang="scss">
  .pagination_box {
    height: 60px;
    width: 100%;
    background-color: #fff;
    margin-right: 10px;
  }

  .btn {
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
  }

  .top_filter {
    font-size: 15px;
    padding: 10px 20px;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    &_col {
      padding: 4px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 10px;

      &_tit {
        white-space: nowrap;
        margin: 8px;
      }
    }
  }
</style>
